<template>
    <div>
        <div  aria-label="Breadcrumb" role="navigation" class="el-breadcrumb">
            <span  class="el-breadcrumb__item link" aria-current="page"  v-for="(item,index) in $store.state.breadcrumb">
                <span role="link" class="el-breadcrumb__inner is-link" @click="clicked(item)">{{item.value}}</span>
                <i class="el-breadcrumb__separator el-icon-arrow-right" v-if="index!=($store.state.breadcrumb.length-1)"></i>
            </span>
        </div>
    </div>
</template>

<script>
    import {mapActions} from 'vuex';
    export default {
        data() {
            return {
            
            }
        },
        methods: {
            ...mapActions(['deletebreadcrumb']),
            clicked(value) {
                if(value.name=='login'){
                    this.deletebreadcrumb(0);
                    this.$router.push("/");
                }
                else{
                    let indexA=-1;
                    for (let index = 0; index < this.$store.state.breadcrumb.length; index++) {
                        const element = this.$store.state.breadcrumb[index];
                        if(element.name==value.name){
                            indexA=index;
                            break;
                        }
                    }
                    if(indexA== this.$store.state.breadcrumb.length-1){
                        return;
                    }
                    else{
                        this.deletebreadcrumb(indexA);
                        this.$router.push({
                            name: value.name,
                            params:value.params
                        });
                    }
                    
                }
            }
        },
    }
</script>

<style scoped>

</style>